<template>
  <div class="set-authority pad">
    <el-page-header class="page-header" @back="goBack" :content="title">
    </el-page-header>
    <el-tree
      ref="authTree"
      :data="authTreeData"
      show-checkbox
      node-key="id"
      :default-expand-all="true"
      v-loading="treeLoading"
    >
    </el-tree>
    <el-button
      v-if="authTreeData.length"
      type="primary"
      @click="fetchSetAuthority"
      class="m-t-b"
      :disabled="!canUse"
    >分配权限</el-button>
  </div>
</template>
<script>
import {
  getAllAuthority,
  setAuthority,
  getAuthByRoleId
} from '../api';
import { authList2Tree } from '../util';
export default {
  name: 'SetAuthority',
  props: ['roleId'],
  data () {
    return {
      title: '',
      treeLoading: false,
      rId: '',
      canUse: true,
      authTreeData: [],
      curAuthList: []
    }
  },
  methods: {
    goBack () {
      history.back()
    },
    fetchAllAuth () { //查询所有权限
      this.treeLoading = true;
      getAllAuthority()
      .then(res => {
        if (res.data.code === 1) {
          let list = res.data.data || [];
          let tempList = authList2Tree(list);
          this.authTreeData = tempList;
          console.log(this.authTreeData)
          // this.$refs.authTree.setCheckedKeys(this.selectedAuthId, true)
          this.fetchCurAuth(this.rId);
          // this.treeLoading = false
        } else {
          this.treeLoading = false;
          this.$message.error(res.data.msg || '服务异常!')
        }
      })
      .catch(e => {
        console.log(e)
        this.treeLoading = false;
        this.$message.error('服务异常!')
      })
    },
    fetchSetAuthority () { // 设置权限
      this.canUse = false;
      let res = this.$refs.authTree.getCheckedNodes();
      let halfRes = this.$refs.authTree.getHalfCheckedNodes();
      let list = [...res, ...halfRes];
      let tempList = list.map(item => {
        return [
          this.rId,
          item.id
        ]
      });
      console.log(tempList)
      // return
      if (!tempList.length) {
        this.$message.error('请选择权限!')
      };
      setAuthority({
        userRoleId: this.rId,
        userRolePermission: tempList
      })
      .then(res => {
        if (res.data.code === 1) {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        } else {
          this.$message.error(res.data.msg || '服务异常!')
        };
        this.canUse = true
      })
      .catch(e => {
        this.canUse = true;
        this.$message.error('服务异常!')
      })
    },
    fetchCurAuth (roleId) { // 根据角色id查询权限
      getAuthByRoleId(roleId)
      .then(res => {
        if (res.data.code === 1) {
          this.curAuthList = res.data.data || [];
          this.selectedAuthId = this.curAuthList.map(item => item.userPermissionId);
          this.selectedAuthId.forEach(item => {
            this.$refs.authTree.setChecked(item, true, false)
          });
          // this.$refs.authTree.setCheckedKeys(this.selectedAuthId, false)
        } else {
          this.$message.error(res.data.msg || '服务异常!')
        };
        this.treeLoading = false;
      })
      .catch(e => {
        this.treeLoading = false;
        this.$message.error('服务异常!')
      })
    }
  },
  mounted () {
    this.rId = Number(this.$props.roleId);
    let path = this.$route.meta.path;
    this.title = path[path.length - 1];
    this.fetchAllAuth()
  }
}
</script>
<style lang="scss" scoped>
  .set-authority {

  }
</style>
